<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>新闻信息管理系统</title>
  <link rel="stylesheet" href="view/assets/css/bootstrap.min.css">
  <script src="view/assets/js/html5shiv.min.js"></script>
  <script src="view/assets/js/respond.min.js"></script>
</head>
<style>
  *{
    margin: 0;
    padding: 0;
  }
  .line-limit-length {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap; //文本不换行，这样超出一行的部分被截取，显示...
  }
</style>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" style="margin: auto;" href="index.php">新闻信息管理系统</a>
      <a class="navbar-brand" style="margin: auto; font-size: 15px;" href="index.php">首页</a>
      <a class="navbar-brand" style="margin: auto; font-size: 15px;" href="showallarticle.php">文章</a>
      <a class="navbar-brand" style="margin: auto;font-size: 15px;" href="about.php">关于</a>
    </div>
  </div>
</nav>
<!--主体部分-->
<div class="jumbotron text-center">
  <div style="margin: 20px;">
    <h2>所有文章</h2><br>
    <p>按照时间排序</p>
  </div>
</div>
<div class="container">
  <div class="row">
    <div class="col-sm-3">
      <div class="page-header">
        <h4  style="text-align: center;">文章栏目 <small>查看文章分类</small></h4>
      </div>
      <div class="text-center">
        <!--栏目内容-->
        <?php foreach($cats as $c) {?>
        <a class="btn btn-info" style="margin-top: 5px;" type="button" href="showallarticle.php?cat_id=<?php echo $c['cat_id']; ?>">
          <span><?php echo $c['cat_name']; ?></span><span class="badge"><?php echo $c['cat_num'];?></span>
        </a><br>
        <?php } ?>
        <a href="showallarticle.php" class="btn btn-info" style="margin-top: 5px;" type="button">显示全部</a>
      </div>
    </div>
    <div class="col-sm-8 text-center">
      <div class="article">
        <!--文章部分-->
        <?php  foreach($arts as $a)  {  ?>
        <div class="panel panel-default">
          <div class="panel-body">
            <div class="row">
              <div class="col-sm-4">
                <?php  if ($a['thumb']) { ?>
                <img style="float: left;" src="./<?php echo $a['thumb']; ?>" width="170px;" height="120px;">
                <?php  } ?>
              </div>
              <div class="col-sm-8"><a href="art.php?art_id=<?php echo $a['art_id'];?>" style="font-size: 30px;"><?php echo $a['title'];  ?></a>
                <p class="line-limit-length"><?php echo $a['content']; ?></p>
                <span>作者:<?php echo $a['author'];?></span>&nbsp&nbsp&nbsp<span style="left: 20px;">评论  <span class="badge"><?php echo $a['comm'];?></span>  </span>&nbsp&nbsp<span>分类：<?php echo $a['cat_name'];?></span><a href="art.php?art_id=<?php echo $a['art_id'];?>" style="float: right;">查看详情</a></div>
            </div>
          </div>
        </div>
        <?php }?>
      </div>
    </div>
  </div>
</div>
<div class="jumbotron text-center" style="margin-bottom:0">
  <p>Copyright © 2020-2021 用于数据库实践</p>
</div>
<script src="view/assets/js/jquery.min.js"></script>
<script src="view/assets/js/bootstrap.min.js"></script>
</body>
</html>
